<template>
  <div id="app">
    <!-- <transition name="slide-fade"> -->
    <navbar v-if="navInfo.showNavbar" ref="navbar"></navbar>
    <!-- </transition> -->
    <div :class="{'page-no-nav': !navInfo.showNavbar, 'page-has-nav': navInfo.showNavbar}">
      <!-- style="min-height:100%" -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import navbar from "./components/navbar.vue";
import { mapState } from "vuex";
import initScreen from "./service/initialize";

export default {
  components: {
    navbar
  },
  data() {
    return {
      transitionName: ""
    };
  },
  computed: {
    ...mapState({
      navInfo: state => state.router_module.navInfo,
      countAlias: "navInfo"
    })
  },
  beforeMount() {
    // 根据分辨率比例来改变字体大小
    initScreen(this.$store);
  },
  mounted() {
    // console.log(this.defaultAvatar);
    this.$nextTick(() => {});
  }
};
</script>

<style>
/* @font-face {
  font-family: "sarasa";
  src: url("./fonts/sarasa-gothic-sc-regular.ttf");
} */

#app {
  font-family: Arial, sans-serif, Helvetica, "黑体", "Microsoft YaHei", "sarasa",
    "Avenir", Helvetica;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

.page-has-nav {
  height: calc(100% - 46px);
  position: relative;
  margin-top: 3px;
  overflow: auto;
}

.page-no-nav {
  height: 100%;
  position: relative;
  overflow: auto;
}

html,
body,
#app {
  width: 100%;
  height: 100%;
  color: #868387;
  background-color: #f7f8ff;
  overflow: hidden;
}

body,
p {
  margin: 0;
  padding: 0;
}

:root {
  --line-between-color: rgba(238, 238, 238, 0.6);
  --Emphasize-font: #323233;
  --money-up: rgb(236, 98, 51);
  --money-down: rgb(103, 229, 172);
}

.slide-fade-enter-active {
  transition: all 0.15s ease;
}
.slide-fade-leave-active {
  transition: all 0.15s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateY(-5px);
  opacity: 0;
}

.slide-fade-leave-to {
  height: 0 !important;
}

/* vant---------------------------------------------------------- */
.tabbar,
.tabbar .van-tabs {
  z-index: 100 !important;
}

.van-tabbar {
  height: 56px !important;
  border-top: 1px solid rgba(125, 126, 128, 0.1);
}

.van-tabbar .van-tabbar-item {
  font-size: 0.9rem;
}

.van-tabbar .van-tabbar-item__text {
  margin-top: 2px;
}

.van-tab {
  font-size: 1rem !important;
}

.van-button--small {
  font-size: 0.9rem !important;
  border-radius: 5px !important;
}

.van-cell {
  font-size: 1rem !important;
}

.van-button--large {
  line-height: 43px !important;
  height: 44px !important;
  border-radius: 6px !important;
}

.van-address-item__edit {
  font-size: 1.5rem !important;
}

.van-submit-bar {
  bottom: 56.5px !important;
}

.van-submit-bar .van-button--large {
  border-radius: 0 !important;
}

.van-radio__label {
  padding: 0 12px;
}

.van-submit-bar .van-button--info,
.submit .van-button--info {
  background-color: #283c79;
  border: 1px solid #283c79;
}

.van-button--info {
  background-color: #283c79;
  border: 1px solid #283c79;
  border-radius: 6px;
}

.van-button--plain {
  background-color: transparent !important;
}

.van-list__finished-text {
  background-color: transparent !important;
}

.van-field__left-icon {
  display: flex;
  align-items: center;
  margin-right: 8px !important;
}

.submit {
  margin-top: 20px;
  padding: 10px 15px;
}

.cancel {
  margin-top: 2px;
  padding: 10px 15px;
}

p.price > span.price-up {
  color: var(--money-up);
}

p.price > span.price-down {
  color: var(--money-down);
}

.be-short {
  text-align: center;
  padding: 10px;
}

.dot {
  /* position: absolute;
  right: 20px;
  top: 12px; */
  margin-left: 5px;
  /* display: inline-block; */
  vertical-align: middle;
  text-align: center;
  color: #fff;
  width: 18px !important;
  height: 18px !important;
  line-height: 18px;
  border-radius: 15px;
  font-size: 0.8rem;
  background-color: #ed3234;
}
.text {
  z-index: 100;
}
</style>
